<template>
    <div class="jd-form-table" ref="jdFormTable">
        <el-table :data="data" ref="table" :max-height="maxHeight" border stripe :row-style="{ height: '25px' }">
            <el-table-column type="index" width="60" fixed="left" align="center">
                <template #header v-if="addBtn">
                    <el-button type="primary" icon="el-icon-plus" size="small" circle @click="rowAdd" :disabled="maxRow != 0 && data.length >= maxRow"></el-button>
                </template>
                <template #default="scope" v-if="addBtn">
                    <div class="form-table-handle">
                        <span>{{ scope.$index + 1 }}</span>
                        <el-button type="danger" icon="el-icon-delete" size="small" plain circle @click="rowDel(scope.row, scope.$index)"></el-button>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="" width="50" v-if="dragSort">
                <template #default>
                    <div class="move" style="cursor: move"><el-icon-d-caret style="width: 1em; height: 1em" /></div>
                </template>
            </el-table-column>

            <!-- <el-table-column v-for="(prop, index) in tableColumnList" :key="prop + index" :label="propMapLabel[prop]">
                <template #default="{ row }">
                    <el-input :disabled="disabled" v-model="row[prop]"></el-input>
                </template>
            </el-table-column> -->

            <slot></slot>
            <template #empty>
                {{ placeholder }}
            </template>
        </el-table>
    </div>
</template>

<script>
import Sortable from 'sortablejs';

export default {
    props: {
        maxRow: { type: Number, default: 0 },
        maxHeight: { type: Number, default: 550 },
        modelValue: { type: Array, default: () => [] },
        addTemplate: { type: Object, default: () => {} },
        placeholder: { type: String, default: '暂无数据' },
        addBtn: { type: Boolean, default: true },
        dragSort: { type: Boolean, default: false },
        disabled: { type: Boolean, default: false },
        // propMapLabel: { type: Object, default: () => {} }
    },
    data() {
        return {
            data: []
        };
    },
    mounted() {
        this.data = this.modelValue;
        if (this.dragSort) {
            this.rowDrop();
        }
    },

    computed: {
        // tableColumnList() {
        //     if (typeof this.addTemplate !== 'object' || this.addTemplate.toString() === '{}') return [];
        //     const result = Object.keys(this.addTemplate);
        //     return result;
        // }
    },

    watch: {
        modelValue() {
            this.data = this.modelValue;
        },
        data: {
            handler() {
                this.$emit('update:modelValue', this.data);
            },
            deep: true
        },
        placeholder: {
            handler() {
                console.log('placeholder');
            },
            deep: true
        },
        addTemplate: {
            handler() {
                console.log(this.addTemplate, 'addTemplate');
            },
            deep: true
        }
    },
    methods: {
        rowDrop() {
            const _this = this;
            const tbody = this.$refs.table.$el.querySelector('.el-table__body-wrapper tbody');
            Sortable.create(tbody, {
                handle: '.move',
                animation: 300,
                ghostClass: 'ghost',
                onEnd({ newIndex, oldIndex }) {
                    _this.data.splice(newIndex, 0, _this.data.splice(oldIndex, 1)[0]);
                    const newArray = _this.data.slice(0);
                    const tmpHeight = _this.$refs.jdFormTable.offsetHeight;
                    _this.$refs.jdFormTable.style.setProperty('height', tmpHeight + 'px');
                    _this.data = [];
                    _this.$nextTick(() => {
                        _this.data = newArray;
                        _this.$nextTick(() => {
                            _this.$refs.jdFormTable.style.removeProperty('height');
                        });
                    });
                }
            });
        },
        rowAdd() {
            //el-table__body-wrapper el-scrollbar el-scrollbar__wrap
            const _this = this;
            const temp = JSON.parse(JSON.stringify(this.addTemplate));
            this.data.push(temp);
            _this.$nextTick(() => {
                // console.log(_this.$refs.jdFormTable.offsetHeight);
                // console.log(_this.$refs.table);
                _this.$refs.table.setScrollTop((this.data.length + 1) * 28);
            });
        },
        rowDel(row, index) {
            this.data.splice(index, 1);
        }
    }
};
</script>

<style scoped>
.jd-form-table {
    width: 100%;
}
.jd-form-table .form-table-handle {
    text-align: center;
}
.jd-form-table .form-table-handle span {
    display: inline-block;
}
.jd-form-table .form-table-handle button {
    display: none;
}
.jd-form-table .hover-row .form-table-handle span {
    display: none;
}
.jd-form-table .hover-row .form-table-handle button {
    display: inline-block;
}
.jd-form-table .move {
    text-align: center;
    font-size: 14px;
    margin-top: 3px;
}
</style>
